<template>
  <el-card style="height: 100%">
    <el-divider content-position="left">就诊详情</el-divider>
    <el-card
      style="float: left; width: 40%; margin-right: 20px"
      shadow="hover"
    ><el-form :inline="true" :model="form" class="demo-form-inline">
       <el-form-item label="挂号单号">
         <el-input v-model="form.registerId" placeholder="挂号单号" />
       </el-form-item>
       <el-form-item>
         <el-button type="primary" @click="onSubmit">查询</el-button>
       </el-form-item>
     </el-form>
      <el-table
        :data="registertableData"
        highlight-current-row
        style="width: 100%"
        @current-change="handleCurrentChange"
      >
        <el-table-column property="register_id" label="挂号单号" width="140" />
        <el-table-column property="register_date" label="挂号日期" width="120" />
        <el-table-column
          property="doctor_name"
          label="医生姓名"
          width="120"
        />
        <el-table-column property="register_department" label="挂号科室" />
      </el-table>
    </el-card>
    <el-card shadow="hover" style="height: 750px">
      <!-- <el-skeleton :rows="6" animated /> -->
      <el-divider><p style="font-size: 24px">校医院病情报告单</p></el-divider>
      <el-descriptions class="margin-top" :column="2" border>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-user" />
            姓名
          </template>
          张三
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-tickets" />
            挂号单号
          </template>
          {{ this.form.registerId }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-location-outline" />
            年龄
          </template>
          22
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-date" />
            挂号日期
          </template>
          {{ this.registerDate }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-office-building" />
            性别
          </template>
          男
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label">
            <i class="el-icon-mobile-phone" />
            联系电话
          </template>
          13429274725
        </el-descriptions-item>
      </el-descriptions>
      <el-divider
        content-position="left"
      ><p style="font-size: 18px">症状</p></el-divider>
      <p>
        <el-skeleton
          v-if="this.symptom === null || this.symptom === ''"
          :rows="3"
          animated
        />
        {{ this.symptom }}
      </p>
      <el-divider
        content-position="left"
      ><p style="font-size: 18px">诊疗内容</p></el-divider>
      <el-skeleton
        v-if="this.payInfotableData.length == 0"
        :rows="4"
        animated
      />
      <el-table
        v-if="payInfotableData != 0"
        :data="payInfotableData"
        border
        show-summary
        style="width: 100%"
      >
        <el-table-column prop="medicineName" label="项目/药物" width="180" />
        <el-table-column prop="unitPrice" label="单价" />
        <el-table-column prop="count" label="数量" />
        <el-table-column prop="total" label="总价" />
      </el-table>
      <el-divider
        content-position="left"
      ><p style="font-size: 18px">诊断/医生意见</p></el-divider>
      <p>
        <el-skeleton
          v-if="this.check_result === null || this.check_result === ''"
          :rows="5"
          animated
        />
        {{ this.check_result }}
      </p>
    </el-card>
  </el-card>
</template>

<script>
import { getRegisterInfo, selectRegisterInfo } from '@/api/registerInfo'
import { selectPayInfo } from '@/api/payInfo'
export default {
  name: 'PageTwo',
  data() {
    return {
      symptom: '',
      check_result: '',
      registerDate: '',
      registertableData: [],
      payInfotableData: [],
      form: {
        registerId: ''
      }
    }
  },
  created() {
    this.getRegisterInfo()
  },
  methods: {
    async getRegisterInfo() {
      const data = await getRegisterInfo()
      // console.log(data);
      this.registertableData = data.data.message
      this.registertableData.forEach((item) => {
        item.register_date = item.register_date.slice(0, 10)
      })
    },
    handleCurrentChange(val) {
      this.form.registerId = val.register_id
      this.registerDate = val.register_date
    },
    // 提交挂号表单
    async onSubmit() {
      if ((this.form.registerId ?? '') !== '') {
        // 获取挂号相关就诊信息
        const registerInfo = await selectRegisterInfo({
          ...this.form
        })
        this.symptom = registerInfo.data.message[0].symptom
        this.check_result = registerInfo.data.message[0].check_result
        // 获取挂号相关支付信息
        const {
          data: { message }
        } = await selectPayInfo({
          ...this.form
        })
        console.log(message)
        const payInfo = JSON.parse(message[0].payInfo)
        console.log(payInfo)
        if (payInfo === 0) {
          this.payInfotableData = []
        } else {
          this.payInfotableData = payInfo
        }
      } else {
        this.$message({
          showClose: true,
          message: '输入框不能为空喔',
          type: 'warning'
        })
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
